<template>
	<div class="w-full pb-[20px] bg-[#f5f5f5]">
		<div class="iconfont icon-elment icon">饿了么</div>
		<div class="flex flex-row items-center text-[32px] font-bold text-center">
			<div class="w-[110px] ml-[25px] mr-[20px] border-b-[6px] border-[#02B6FD] border-solid">全部</div>
			<div class="w-[110px] mr-[20px]">待评价</div>
			<div class="w-[110px] mr-[20px]">退款</div>
		</div>
		<div v-for="i in 10" @click="Nav.navToPage('Order')" class="w-[700px] h-[400px] box-border p-[24px] bg-white mt-[20px] mx-[25px] rounded-[20px]">
			<div class="flex flex-row items-center">
				<img class="w-[48px] h-[48px] rounded-[10px]" :src="t1_g3_i1" alt="" />
				<div class="text-[32px] px-[10px]">铜锅洋芋饭</div>
				<div class="w-[320px]"></div>
				<div class="w-[102px] text-right text-[28px] text-[#999999]">已送达</div>
			</div>
			<div class="flex flex-row items-center mt-[10px]">
				<div class="text-[#FF4B33] text-[24px]">本店下5单得￥5元红包</div>
				<div class="w-[10px]"></div>
				<img v-for="i in 2" class="w-[22px] h-[22px] mr-[5px]" :src="fill" alt="" />
				<img v-for="i in 3" class="w-[22px] h-[22px] mr-[5px]" :src="out" alt="" />
			</div>
			<div class="flex flex-row items-center mt-[10px]">
				<img v-for="i in 3" class="w-[140px] h-[140px] mr-[5px]" :src="t1_g2_i1" alt="" />
				<div class="w-[140px]"></div>
				<div class="w-[140px] text-right">
					<div class="text-[32px]">￥24.7</div>
					<div class="text-[24px] text-[#999999]">共3件</div>
				</div>
			</div>
			<div class="flex flex-row items-center justify-between mt-[40px]">
				<div></div>
				<div class="text-[#00ACF0] text-[26px] px-[24px] py-[8px] mr-[8px] border-solid border-2 border-[#00ACF0] rounded-[50px]">再来一单</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
	import t1_g3_i1 from '@/assets/images/t1_g3_i1.webp';
	import t1_g2_i1 from '@/assets/images/t1_g2_i1.webp';
	import fill from '@/assets/images/fill.png';
	import out from '@/assets/images/out.png';
	import { Nav } from '@/main';
</script>
<style scoped>
	.icon {
		font-weight: bold;
		padding: 20px;
		font-size: 36px;
		color: #0fb6f9;
	}
</style>
